<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="./css/login.css">
	<link rel="stylesheet" href="css/base.css">
	<title>注册登录</title>
	<link rel="icon" href="./img/favicon.ico">
</head>
<body>
	<!-- 一楼 -->
	<div class="container-fluid">
	<div class="f1">
	<div class="container">
		<img src="./img/211011091204416_90x26_2051.png" >
	</div>
	</div>
	<!-- 二楼 -->
	<div class="f2">
		<div class="container">
			<div class="row">
				<div class="col-10">
			<h2>登陆/注册</h2>
				</div>
				<div class="col-2">
					<a href="homepage.html">返回首页</a>
				</div>
			</div>
		</div>
	</div>
	</div>
	<!-- 三楼 -->
	<div class="f3">
	<div class="container">
		<div id="enroll">
			<p>您正在注册咪咕帐号</p>
			<p>您可以使用该帐号登录咪咕音乐、咪咕视频、咪咕阅读、咪咕游戏、咪咕圈圈等业务。</p>
			<p>中国移动用户已默认注册和通行证帐号，可直接登录咪咕业务</p>
			<div class="row">
				<div class="col-3">
					<span>手机号</span>
				</div>
				<div class="col-9">
					<input placeholder="请输入手机号">
				</div>
				</div>
				<div class="row">
					<div class="col-3">
						<span>短信验证码</span>
					</div>
					<div class="col-5">
						<input placeholder="请输入验证码">
					</div>
					<div class="col-4">
						<div class="btn">获取验证码</div>
					</div>
				</div>
				<div class="row">
					<div class="col-3">
						<span>设置密码</span>
					</div>
					<div class="col-9">
						<input placeholder="请输入密码">
					</div>
				</div>
				<div class="lg">
					<span>立即注册</span>
					</div>
		</div>
		<div id="login">
			<div class="login-inter">
				<div class="row">
					<div class="cur" id="col">短信登录</div>
					<div id="col">密码登陆</div>
					<div id="col">SIM登录</div>
				</div>
				<div id="hint">
					<img src="./img/err.png" >
					<img src="img/ok.png" >
					<span>手机号格式不正确</span>
					<span>手机号可用</span>
				</div>
				<div id="phon">
				<input placeholder="手机号">
				<div class="row">
					<div class="col-7">
						<input placeholder="请输入验证码"/>
					</div>
					<div class="col-5">
						<p>获取验证码</p>
					</div>
				</div>
				<p>登录</p>
				</div>
				<div id="pwd">
					<input placeholder="手机号/邮箱/用户名">
					<input placeholder="密码">
					<div id="sign">
							<div class="col">
								<input type="checkbox"/>
								<span>自动登录</span>
							</div>
							<div class="col">
								<span>忘记密码</span>
								<span>|</span>
								<a href="login.html">注册</a>
							</div>
					</div>
					<div id="tisi">
					<img src="./img/err.png" >
					<img src="img/ok.png" >
					<span>密码长度在5~12位</span>
					<span>密码长度符合</span>
					</div>
					<p>登录</p>
					<span>手机号或密码不正确</span>
				</div>
				<div id="SIM">
					<input placeholder="手机号">
					<p>登录</p>
					<span>温馨提示：</span>
					<span>1.“SIM登录” 是由中国移动提供的PC端安全登录服务</span>
					<span>2.输入手机号点击 “登录”，即可在手机上查看登录请求，并使用手机进行登录授权</span>
				</div>
				<div class="text">
					登录即同意<span>《咪咕用户服务协议》</span>
					和<span>《咪咕隐私权政策》</span>
				</div>
			</div>
		</div>
		<div id="switclg">
			已有账号 切换登录
		</div>
	</div>	
	</div>
	<div class="f4">
		<div class="container">
			<p>公司简介|帮助中心|用户指南|移动门户|咪咕用户服务协议|咪咕隐私权政策|蜀ICP备15012512号-1 © 2019 咪咕文化科技有限公司</p>
		</div>
	</div>
	<script src="jquery-3.6.0.js"></script>
	<script>
	var i=0
	switclg.onclick=()=>{
		i++
		if(i>1){
			i=0
		}
		if(i==0){
		login.style=`transform: perspective(1000px) rotateY(180deg);`
		enroll.style=`transform: perspective(1000px) rotateY(0deg);`
			switclg.innerHTML='已有账号 切换登录'
		}
		if(i==1){
			login.style=`transform: perspective(1000px) rotateY(0deg);`
			enroll.style=`transform: perspective(1000px) rotateY(180deg);`
		switclg.innerHTML='没有账号 前往注册'
		}
	}
	$('.login-inter>div>input:first-child').on('input',function(){
			if($(this).val()==''){
				$('#hint').prop('class','')
				return
			}
		if(/^1[3-9]\d{9}$/.test($(this).val())){
			$('#hint').prop('class','ok')
		}else{
			$('#hint').prop('class','err')
		}
	})
	$('.login-inter>div>input:first-child').blur(function(){
		$('#hint').prop('class','')
	})
	$('#pwd>input:nth-of-type(2)').on('input',function(){
		const l=$(this).val()
		if(l==''){
			$('#tisi').prop('class','')
			return
		}
		if(l.length>12 || l.length<5){
			$('#tisi').prop('class','err')
		}else{
			$('#tisi').prop('class','ok')
		}
	})
	$('#pwd>input:nth-of-type(2)').blur(function(){
		$('#tisi').prop('class','')
	})
	// $('#pwd>p').click(function(){
	// 	let p=$('#pwd>input:first-child').val()
	// 	let w=$('#pwd>input:nth-of-type(2)').val()
	// 	let xhr=new XMLHttpRequest()
	// 	xhr.open('get','/v1/log/lg?phone='+p+'&pwd='+w)
	// 	xhr.send()
	// 	xhr.onload=()=>{
	// 		console.log(xhr.responseText)
	// 		if(xhr.responseText=='err'){
	// 			$('#pwd>span').prop('class','err')
	// 		}
	// 	}
	// })
	$('.login-inter>.row').on('click','div',function(){
		$(this).addClass('cur').siblings().removeClass('cur')
		if($(this).text()=='短信登录'){
			phon.style.display=''
			pwd.style.display='none'
			SIM.style.display='none'
		}
		if($(this).text()=='密码登陆'){
			phon.style.display='none'
			pwd.style.display='block'
			SIM.style.display='none'
		}
		if($(this).text()=='SIM登录'){
			phon.style.display='none'
			pwd.style.display='none'
			SIM.style.display='block'
		}
	})
	</script>
</body>
</html>
